<template>
    <div
        :id="id"
        style="width: 100%; height: 100%; min-height: 250px"
        ref="el"
    ></div>
</template>
<script>
import { shallowRef, computed, ref } from "vue";
import { v4 as uuidv4 } from "uuid";
import * as echarts from "echarts";
// import { graphic } from "echarts/core"; //颜色渐变
import { useElementSize } from "@vueuse/core";

export default {
    props: {
        options: {
            type: Object,
            default: () => {},
        },
    },
    setup(props) {
        let _id = uuidv4();
        const el = ref(null);
        const options = computed({
            get: () => props.options,
        });
        const { width, height } = useElementSize(el);
        return {
            el,
            id: _id,
            options,
            width,
            height,
            myChart: shallowRef(null),
        };
    },
    watch: {
        options: {
            handler() {
                this.myChart && this.myChart.clear();
                this.$nextTick(() => this.setOptions());
            },
            deep: true,
        },
        //监听外部容器大小改变
        width: {
            handler() {
                this.myChart && this.myChart.resize();
            },
        },
        //监听外部容器大小改变
        height: {
            handler() {
                this.myChart && this.myChart.resize();
            },
        },
    },
    unmounted() {
        const { myChart } = this;
        myChart && myChart.dispose();
        window.removeEventListener("resize", () => {});
    },
    mounted() {
        var chartDom = document.getElementById(this.id);
        var myChart = chartDom && echarts.init(chartDom);
        this.myChart = myChart;
        this.$nextTick(() => {
            this.setOptions();
        });

        //监听屏幕尺寸变化
        window.addEventListener("resize", () => {
            this.myChart && this.myChart.resize();
        });
    },
    methods: {
        setOptions() {
            const { myChart, options } = this;
            myChart &&
                myChart.setOption({
                    color: [
                        "#3269FF",
                        "#FF9671",
                        "#FFC75F",
                        "#00C9A7",
                        "#D65DB1",
                        "#BFA975",
                    ],
                    //全局字体样式
                    textStyle: {
                        fontFamily: "v-sans",
                    },
                    animationEasing: "elasticOut",
                    ...options,
                    tooltip: {
                        extraCssText: `border: 1px solid var(--border-color);
                            border-radius: 2px;
                            box-shadow: 0px 0px 3px var(--border-color);
                            min-width: 80px;
                            `,
                        ...options.tooltip,
                    },
                    grid: {
                        top: "20px",
                        left: "10px",
                        containLabel: true,
                        bottom: "10px",
                        right: "10px",
                        ...options.grid,
                    },
                });
        },
    },
};
</script>
